<template>
	<div>
		<div class="k" style="width: 100%;height: 50px;"></div>
		<div id="b" style="width: 1600px; margin-left: calc(50% - 800px);">
			<el-table :data="veg" style="1000px" height="800px">
				<el-table-column prop='vid' label="菜品编号"></el-table-column>
				<el-table-column prop='vname' label="菜品名称"></el-table-column>
				<el-table-column prop='vtypeid.vtypename' label="菜品类别"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="owner">
						<el-button v-if="ishave[owner.$index]==0" @click="shang(owner.row.vid)">暂时上架</el-button>
						<el-button v-if="ishave[owner.$index]==1" @click="xia(owner.row.vid)">暂时下架</el-button>
						<el-button @click="delv(owner.row.vid)">删除菜品</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				veg: [],
				ishave: []
			}
		},
		created: function() {
			this.queryveg();
		},
		methods: {
			queryveg: function() {
				this.$http.get("http://localhost:8080/OrderSystemServer/order/veg/show")
					.then((response) => {
						this.veg = response.data.body;
						//console.log(this.veg);
						this.isHave();
					});

			},
			isHave: function() {
				let t = [];
				console.log(this.veg);
				for(let i = 0; i < this.veg.length; i++) {
					//console.log(i);console.log(this.veg[i].kc.ishave)
					t.push(this.veg[i].kc.ishave);
				}
				this.ishave = t;
				console.log(t);
			},
			shangxia: function(vid) {
				if(this.choice == '暂时下架') {
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/veg/updatekc?vid=${vid}&isHave=0`)
						.then((response) => {
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '下架成功'
								});
								this.isHave(vid);
								this.queryveg();
							}
						})
				} else {
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/veg/updatekc?vid=${vid}&isHave=1`)
						.then((response) => {
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '上架成功'
								});
								this.isHave(vid);
								this.queryveg();
							}
						})
				}
			},
			shang:function(vid){
				this.$http.get(`http://localhost:8080/OrderSystemServer/order/veg/updatekc?vid=${vid}&isHave=1`)
						.then((response) => {
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '上架成功'
								});
								this.queryveg();
							}
						})
			},
			xia:function(vid){
				this.$http.get(`http://localhost:8080/OrderSystemServer/order/veg/updatekc?vid=${vid}&isHave=0`)
						.then((response) => {
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '下架成功'
								});
								this.isHave(vid);
								this.queryveg();
							}
						})
			},
			delv: function(vid) {
				this.$confirm('此操作将永久删除该菜品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/veg/del?vid=${vid}`)
						.then((response) => {
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '删除成功'
								});
								this.isHave(vid);
								this.queryveg();
							}
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>

<style>

</style>